<template>
  <div>
    <div id="map"></div>
  </div>
</template>
<script>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { prefix } from "../Api/api";
// import {gettopicsearchData}from '../Api/api';

export default {
  data() {
    let id = sessionStorage.getItem("id");
    return {
      curMap: id,
      mapVisible: false,
      mapPathRoot: prefix,
      //  mapPathRoot: "http://192.168.1.4:9000/",
      map: "",
      filters: { searchVal: "" },
      activeName: "first",
    };
    console.log(this.mapPathRoot);
  },

  methods: {
    initMap() {
      let map = L.map("map", {
        minZoom: 7,
        maxZoom: 13,
        center: [30.011392072394096, 114.23695323220879],
        zoom: 12,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857,
      });
      this.map = map; //data上需要挂载
      window.map = map;
      // L.tileLayer(
      //   // "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
      //   "http://http://osm.org/copyright/{s}.tile.osm.org/{z}/{x}/{y}.png"
      // ).addTo(map);
      L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

      let id = sessionStorage.getItem("id");
      L.tileLayer(
        this.mapPathRoot +
          "rasterImage/searchTilesData/" +
          //  "48e1592d-9459-4ab2-8ab9-c0ba8c35836e_remote" +
          id +
          "/{z}/{x}/{y}",
        { tms: true, opacity: 0.7, attribution: "" }
      ).addTo(map);
      // L.tileLayer(this.mapPathRoot + "rasterImage/searchTilesData/" + this.curMap + '/{z}/{x}/{y}', {tms: true, opacity: 0.7, attribution: ""}).addTo(map);
      // console.log('已发送瓦片获取请求！！！！！！')
    },
    handleClose() {},
  },
  mounted: function () {
    this.initMap();
    console.log("hello");
  },
};
</script>
<style>
#map {
  width: 100%;
  height: 100vh;
}
</style>
